<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全国覆盖图</title>
<script src="js/echarts.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/index.css">
<script type='text/javascript' src="../static/js/echarts.js" charset = "utf-8"></script>
<script src="../static/js/china.js" charset ="utf-8"></script>  
<meta name="大数据平台" content="乐村淘、数据、扶贫">
</head >
<body background="../images/home-bg.jpg">
	<div id='header' name='header'>
		<a href="http://www.lecuntao.com/"><div id='logo' name='logo'></div></a>
	<ul id='ul1' name='ul1' >
		<a href="http://home.lecuntao.com/"><li id='li1' name='li1'  >官网首页</li></a>
		<a href="http://www.lecuntao.com/"><li id='li2' name='li2'>商城首页</li></a>
		<a href="http://home.lecuntao.com/index.html"><li id='li3' name='li3'>关于我们</li></a>
		<a href="http://www.lecuntao.com/shop/index.php?act=article&op=show&article_id=82"><li id='li4' name='li4'>创始人简介</li></a>
	</ul>
	</div>
	<div id='main' name='main'>
		<div>
			<div id='n1' name='n1' style='position: absolute;top: 200px;left: 550px;'>
				<span class="letter">已覆盖省：</span>
				<span class="number" >2</span>
				<span class="number" >5</span>
				<span class="letter" >个</span>
			</div>
			<div id='n2' name='n2'style='position: absolute;top: 200px;left: 750px;'>
				<span class="letter">已覆盖县：</span>
				<span class="number" >7</span>
				<span class="number" >9</span>
				<span class="number" >8</span>
				<span class="letter" >个</span>
			</div>
			<div id='n3' name='n3'style='position: absolute;top: 200px;left: 1000px;'>
				<span class="letter">已覆盖体验店：</span>
				<span class="number" >7</span>
				<span class="number" >5</span>
				<span class="number" >3</span>
				<span class="number" >2</span>
				<span class="number" >9</span>
				<span class="number" >9</span>
				<span class="letter" >家</span>
			</div >
		</div>
		<div id='map' name='map' style="width: 1000px;height:800px;	margin-top: 100px;;margin-left: 430px;
		"></div>
		
		<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('map'));

         var dataxg=[
		        {name: '天津',value: 2},
                {name: '河北',value: 22},
                {name: '山西',value: 104},
                {name: '内蒙古',value: 30},
                {name: '辽宁',value: 10},
                {name: '吉林',value: 10},
                {name: '黑龙江',value: 9},
                {name: '江苏',value: 12},
                {name: '安徽',value: 11},
                {name: '江西',value: 6},
                {name: '山东',value: 44},
                {name: '河南',value: 19},
                {name: '湖北',value: 21},
                {name: '湖南',value: 6},
                {name: '广东',value: 8},
                {name: '广西',value: 28},
                // {name: '重庆',value: 3},
                {name: '四川',value: 14},
                {name: '云南',value: 10},
                {name: '陕西',value: 39},
                {name: '甘肃',value: 15},
                {name: '青海',value: 4},
                {name: '新疆',value: 2},
		                ];	
		 var datatyd=[
		        {name: '天津',value: 13},	
                {name: '河北',value: 3973},	
                {name: '山西',value: 16508},	
                {name: '内蒙古',value: 2819},	
                {name: '辽宁',value: 1202},	
                {name: '吉林',value: 439},	
                {name: '黑龙江',value: 709},	
                {name: '江苏',value: 1083},	
                {name: '安徽',value: 1128},	
                {name: '江西',value: 1336},	
                {name: '山东',value: 6481},	
                {name: '河南',value: 2923},	
                {name: '湖北',value: 1741},	
                {name: '湖南',value: 274},	
                {name: '广东',value: 268},	
                {name: '广西',value: 3916},	
                {name: '重庆市',value: 1},	
                {name: '四川',value: 731},	
                {name: '云南',value: 513},	
                {name: '陕西',value: 3784},	
                {name: '甘肃',value: 1486},	
                {name: '青海',value: 128},	
                {name: '新疆',value: 0}
                ]
		 var option= {
		    title: {
		        text: '乐村淘覆盖图',
		        show:false,
		        left: 'center',
		        textStyle: {   
                    color: '#0066FF'}, 
		    },
		    tooltip: {
		        trigger: 'item',
		     formatter: function(a){
             res = a.name;
         for (var i = 0; i < dataxg.length; i++) 
         {
         if(a.name== dataxg[i].name)
         {
         res +=  '</br>县级：' + dataxg[i].value+'家'
         };
        if(a.name== datatyd[i].name)
         {
         res +=  '</br>体验店：' + datatyd[i].value+'家'
         };
         };
        return res}
		    },
						series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            itemStyle: {
                normal: {
                    areaColor: '#d9d9d9',
                    borderColor: 'black',
                  
                },
                emphasis: {
                    areaColor: '#f00d0d'
                }
            },
            // itemStyle:{
            //     normal:{
            //       areaStyle:{color:'#231816'}
            //     }
            // },
       //      itemStyle:{
							// normal:{
							// 	label:{
							// 		show:true,
							// 		textStyle: {
							// 			//fontWeight:'bold',
							// 		  color: "#231816"
							// 		}
							// 	}
							// }},
            // selectedMode : 'multiple',
            label: {
                normal: {
                    show: true,
                    color: "#bad9af",
                      textStyle: {
							// 			//fontWeight:'bold',
					color: "black"
				}
                },
                emphasis: {
                    show: true,
                    color: "red",
                        textStyle: {
							// 			//fontWeight:'bold',
					color: "#ffffff"
				}
                }
            },
            data:[
                {name: '天津', selected:true},
                {name: '河北', selected:true},
                {name: '山西', selected:true},
                {name: '内蒙古', selected:true},
                {name: '辽宁', selected:true},
                {name: '吉林', selected:true},
                {name: '黑龙江', selected:true},
                {name: '江苏', selected:true},
                {name: '安徽', selected:true},
                {name: '江西', selected:true},
                {name: '山东', selected:true},
                {name: '河南', selected:true},
                {name: '湖北', selected:true},
                {name: '湖南', selected:true},
                {name: '广东', selected:true},
                {name: '广西', selected:true},
                // {name: '重庆', selected:true},
                {name: '四川', selected:true},
                {name: '云南', selected:true},
                {name: '陕西', selected:true},
                {name: '甘肃', selected:true},
                {name: '青海', selected:true},
                {name: '新疆', selected:true},
                {name: '北京', selected:true},
                {name: '宁夏', selected:true},

            ],
               markPoint: {
                symbol: 'pin',
                symbolSize:50,
                itemStyle: {
                normal: {
                    areaColor: 'blue',
                    borderColor: 'blue'
                  
                },
                emphasis: {
                    areaColor: '#f00d0d'
                }
            },
                label:{
                    normal:{
                        show:true,
                        formatter:function(d){return d.name}
                    }
                },
                data: [
                    {name: '太原',coord:[112.55,37.87]}
                ]
            }
        }
    ]

		    // series: [
		    //     {
		    //         name: '县域',
		    //         type: 'map',
		    //         mapType: 'china',
		    //         roam: false,
		    //         label: {
		    //             normal: {
		    //                 show: true
		    //             },
		    //             emphasis: {
		    //                 show: true
		    //             }
		    //         },
		    //          itemStyle:{
      //                normal:{
      //                areaStyle:{color:'black'}
      //           }},
		    //         data:[
		    //             {name: '山西',value: 102},
		    //             {name: '河北',value: 50},
		    //             {name: '陕西',value: 45},
		    //             {name: '广西',value: 30},
		    //             ]
		    //     }		    ]
		};
		myChart.setOption(option);
		window.onresize = myChart.resize;
		</script>





		
	</div>
	<div id='footer' name='footer'>
        <p id='fp' name='fp'>
	      	<span class='dps'>Copyright © 2016</span>
	      	<span class='dps'>&nbsp;</span>
	      	<span class='dps'>&nbsp;</span>
	      	<span class='dps'>All Rights Reserved</span>
	      	<span class='dps'>&nbsp; &nbsp; </span>
	      	<span class='dps'>乐村淘版权所有</span>
	      	<span class='dps'>&nbsp; &nbsp; </span>
	      	<span class='dps'>ICP备</span>
	      	<span class='dps'>&nbsp;</span>
	      	<span class='dps'>11022439号</span>
        </p>
	</div>
</body>
</html>
